<template>
	<view>
		<view class="upload-image" @click="uploadImage">
			<view class="upload-no flex-column-center" v-show="loading == 1">
				<u-icon name="photo" color="#D4D4D4" size="40"></u-icon>
				<view>上传图片</view>
			</view>
			<view class="upload-no flex-column-center" v-show="loading == 2">
				<u-loading mode="flower" size="60"></u-loading>
			</view>
			<view class="flex-column-center" v-show="loading == 3">
				<u-image :show-menu-by-longpress="false" width="188rpx" height="188rpx" border-radius="16rpx" :src="url"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'upload-image',
		props: {
			is_oss: {
				type: Number,
				default: 0
			},
			file_path: {
				type: String,
				default: "wechat_icon" 
			}
		},

		data() {
			return {
				loading: 1,
				url: "",
			}
		},
		created() {

		},
		methods: {
			setData(url) {
				this.url = url;
				this.loading = 3;
			},
			uploadImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.loading = 2;
						if(this.is_oss == 1) {
							uni.$u.api.aliyunOSSFileUploadAsset(1,'image', res.tempFiles[0], this.file_path).then(uploadRes => {
								// console.log(uploadRes);
								this.url = uploadRes.uri;
								this.$emit('success', uploadRes)
								this.loading = 3;
							});
						} else {
							uni.$u.api.aliyunOSSFileUpload(1,'image', res.tempFiles[0], this.file_path).then(uploadRes => {
								// console.log(uploadRes);
								this.url = uploadRes.domain + uploadRes.uri;
								this.$emit('success', uploadRes)
								this.loading = 3;
							});
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.upload-image {
		
	}
	
	.upload-no {
		width: 188rpx;
		height: 188rpx;
		background: #F4F4F4;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #D4D4D4;
	}
</style>
